<template>
    <div>
        <div>
            <el-radio-group v-model="type" size="large" @change="pieChange">
                <el-radio-button label="sale_">销量</el-radio-button>
                <el-radio-button label="_money">销售额</el-radio-button>
            </el-radio-group>

            <el-select v-model="day" class="m-2" placeholder="Select" size="large" @change="pieChange">
                <el-option label="昨天" value="yesterday" />
                <el-option label="今天" value="today" />
                <el-option label="前3天" value="three_days" />
                <el-option label="前7天" value="seven_days" />
                <el-option label="前14天" value="fourteen_days" />
                <el-option label="前1个月" value="thirty_days" />
                <el-option label="前2个月" value="sixty_days" />
            </el-select>
        </div>
        <div class="pie" id="pie" style="height: 400px"></div>
        <div class="map" id="map" style="height: 800px"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
import { statApi } from './api';
import china from "@/json/china.json";
type EChartsOption = echarts.EChartsOption
type dayEmnu = "sixty_days" | "thirty_days" | "fourteen_days" | "seven_days" | "three_days" | "today" | "yesterday";
var option: EChartsOption;
var ChartDom: echarts.ECharts;
var mapChart: echarts.ECharts;
let data: any[];
let pieData: SalePie[] = [];
let mapData: SaleMap[] = [];
// 数据类型
const type = ref<"sale_" | "_money">("sale_")
// 天数
const day = ref<dayEmnu>("yesterday")
const pieChange = () => {
    // console.log(type.value, day.value);
    const key = type.value === "sale_" ? type.value + day.value : day.value + type.value;
    data = pieData.map(item => ({
        name: item.name,
        value: item[key],
    }));

    (option.series as echarts.SeriesOption[])[0].data = data;
    ChartDom.setOption(option);
}
onMounted(() => {
    // 饼图初始化实例
    ChartDom = echarts.init(document.getElementById('pie')!);


    // 地图初始化实例
    var mapChart = echarts.init(document.getElementById("map")!);
    // 注册地图
    echarts.registerMap("china", china as any);



    statApi().then((res) => {
        console.log(res.data);
        // 饼图得到的数据（data默认值）传外部是以为外部需要
        data = res.data.salePie.map(item => ({
            name: item.name,
            value: item.sale_yesterday,
        }))
        pieData = res.data.salePie
        mapData = res.data.saleMap
        // 指定图表的配置项和数据


        Pie()

        // 不传外部是以为这个数据外部用不到
        Map(mapChart)


    })







});
// 饼图数据函数
const Pie = () => {
    option = {
        // 提示组件
        tooltip: {
            trigger: 'item',
            backgroundColor: "rgba(0,0,0,0.5)",
            textStyle: {
                color: "rgb(225,225,225)"
            },
            formatter: '{b}:{c}({d})',
        },
        legend: {
            orient: 'vertical',
            // left: 'left'
            right: "right",
            height: 100,
        },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                label: {
                    color: "inherit",
                    // backgroundColor: "rgba(0,225,225,0.5)"
                },
                radius: ['40%', '70%'],
                data,

            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    option && ChartDom.setOption(option);
}



// 地图的数据
const Map = (mapChart: echarts.ECharts) => {

    const datas = mapData.map(item => ({
        name: item.areaName,
        value: item.saleNum,
    }))
    // 地图具体数据
    mapChart.setOption({
        title: {
            text: "全国销量分布图",
            left: "center"
        },
        tooltip: {
            trigger: "item",
            backgroundColor: "rgba(0,0,0,0.5)",
            textStyle: {
                color: "rgb(225,225,225)"
            },
            formatter: "{b}<br/>销量: {c}",
        },
        label: {
            normal: {
                textStyle: {
                    title: {
                        textStyle: {
                            width: 0
                        }
                    }
                    // fontSize: 0,
                    // fontWeight: 'bold',
                    // color: 'red'
                }
            }
        },
        toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {},
            },
        },

        visualMap: {
            min: 0,
            max: 1000000,
            // text: ["1000000", "0"],
            realtime: false,
            calculable: true,
            inRange: {
                color: ["#ffffff", "#fd6136", "#a82b29"],
            },
        },
        series: [
            {
                type: "map",
                map: "china",
                label: {
                    show: true,
                },
                data: datas,
                // 缩放
                zoom: 1.1
            },
        ],
        nameMap: {
            "北京市": '北京',
            "天津市": '天津',
            "河北省": '河北',
            "山西省": '山西',
            "内蒙古自治区": '内蒙古',
            "辽宁省": '辽宁',
            "吉林省": '吉林',
            "黑龙江省": '黑龙江',
            "上海市": '上海',
            "江苏省": '江苏',
            "浙江省": '浙江',
            "安徽省": '安徽',
            "福建省": '福建',
            "江西省": '江西',
            "山东省": '山东',
            "河南省": '河南',
            "湖北省": '湖北',
            "湖南省": '湖南',
            "广东省": '广东',
            "广西壮族自治区": '广西',
            "海南省": '海南',
            "重庆市": '重庆',
            "四川省": '四川',
            "贵州省": '贵州',
            "云南省": '云南',
            "西藏自治区": '西藏',
            "陕西省": '陕西',
            "甘肃省": '甘肃',
            "青海省": '青海',
            "宁夏回族自治区": '宁夏',
            "新疆维吾尔自治区": '新疆',
            "台湾省": '台湾',
            "香港特别行政区": '香港',
            "澳门特别行政区": '澳门',
            // "南海诸岛": '',
        }

    })
}

</script>

<style scoped>

</style>